$(function () {
  // 1.去后台获取第一屏数据
  var pageSize = 5;
  var currentPage = 1;  //当前页

  var currentId = null;  //当前要操作数据id
  var isDelete = null;   //当前要进行的操作


  function render() {
    $.ajax({
      url: '/user/queryUser',
      data: {
        page: currentPage,
        pageSize: pageSize
      },
      dataType: 'json',
      success: function (info) {
        // console.log(info);
        // 渲染
        $('tbody').html(template('tmp', info));
        // 把后台返回总数生成分页标签
        setPage(info.total);
      }
    })
  }
  render();

  // 2.生成分页标签的方法
  function setPage(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage,//当前页
      totalPages: Math.ceil(total / pageSize),//总页数

      onPageClicked: function (event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值
        currentPage = page;
        render();
      }

    });

  }
  setPage(20);

  // 3.点击操作按钮时记录当前数据以及要进行的操作
  // daraset.id  是dom的方法来获取id
  $('tbody').on('click', '.btn', function () {
    // currentId = $(this).parent().attr('data-id');
    // 保存id
    currentId = $(this).parent().data('id');
    // data-id自定义属性 在jquery中可以通过$('div').data('id');
    // console.log(currentId);
    // 记录禁用还是启用
    isDelete = $(this).hasClass('btn-success')?1:0;

  })
  // 4.点击模态框的确定按钮 对当前数据进行操作
  $('.btn-yes').on('click',function(){
    // console.log(1)
    // 向后台发送ajax请求，禁用或启用指定id用户
    $.ajax({
      url:'/user/updateUser',
      type:'post',
      data:{
        id:currentId,
        isDelete:isDelete
      },
      dataType:'json',
      success:function(info){
        // 重新渲染当前页
        render();
        // 隐藏模态框
        $('.modal-delete').modal('hide');
      }
    })


  })

})


